<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/resources/templates/base_template.xhtml">

        <ui:define name="body">

            <h:outputScript name="js/jquery.ba-dotimeout.min.js" target="head" />
            <h:outputScript name="js/focus.js" target="head" />
            
            <h:form id="form_jsId">

                <!-- filter datatable using custom filters instead of the buildin Primefaces filters which can be only strings 
                    save & restore focus between ajax updates -->
                <p:remoteCommand name="doFilter" onstart="saveFocus()" oncomplete="restoreFocus()" 
                                 action="#{extLazyDatatable.doFilter}" update=":form_jsId" />

                <h:panelGrid columns="2" styleClass="cellaligntop">

                    <p:dataTable id="datatable_jsId" value="#{extLazyDatatable.usersLazyDataModel}" var="user" widgetVar="datatableWidget"
                                 scrollWidth="1000" scrollable="true" scrollHeight="544"
                                 paginator="true" paginatorPosition="bottom" rows="25" lazy="true">

                        <p:column id="idColumn_jsId" headerText="ID" width="50">
                            <h:outputText value="#{user.id}"/>
                        </p:column>

                        <p:column id="firstNameColumn_jsId" headerText="First Name" width="120">
                            <h:outputText value="#{user.firstName}"/>
                        </p:column>

                        <p:column id="lastNameColumn_jsId" headerText="Last Name" width="120"> 
                            <f:facet name="header">
                                <h:panelGrid columns="1">
                                    <h:outputText value="Last Name" />
                                    <!-- filter with debouncing -->
                                    <p:inputText value="#{extLazyDatatable.lastName}"
                                                 onkeyup="$(this).doTimeout( 750, function(){doFilter()});">
                                    </p:inputText>  
                                </h:panelGrid>
                            </f:facet>                                 
                            <h:outputText value="#{user.lastName}"/>
                        </p:column>

                        <p:column headerText="Birth Date" width="160" sortBy="#{user.birthDate}">
                            <f:facet name="header">
                                <h:panelGrid columns="1">
                                    <h:outputText value="Birth Date" />
                                    <h:panelGrid columns="2" style="margin-left:20px;">
                                        <h:outputLabel value="From:"/>
                                        <p:calendar id="filterTripDateFrom" value="#{extLazyDatatable.birthDateFrom}"
                                                    mode="popup"  navigator="true" effect="fadeIn" pattern="MM/dd/yyyy" size="8"
                                                    showButtonPanel="true">
                                            <!-- tricky filter on a "fake" ajax call, since the call is done on the remote command
                                                 maybe there is another way to trigger the filter on the selection of the date -->
                                            <p:ajax partialSubmit="true" event="dateSelect" onstart="doFilter()"/>
                                        </p:calendar>
                                        <h:outputLabel value="To:" />
                                        <p:calendar id="filterTripDateTo" value="#{extLazyDatatable.birthDateTo}"
                                                    mode="popup"  navigator="true" effect="fadeIn" pattern="MM/dd/yyyy" size="8"
                                                    showButtonPanel="true">
                                            <!-- tricky filter on a "fake" ajax call, since the call is done on the remote command
                                                 maybe there is another way to trigger the filter on the selection of the date -->
                                            <p:ajax partialSubmit="true" event="dateSelect" onstart="doFilter()"/>
                                        </p:calendar>
                                    </h:panelGrid>
                                </h:panelGrid>
                            </f:facet>                            
                            <h:outputText value="#{user.birthDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Street" width="200">
                            <h:outputText value="#{user.street}"/>
                        </p:column>

                        <p:column headerText="Home Number" width="200">
                            <h:outputText value="#{user.houseNum}"/>
                        </p:column>

                        <p:column id="cityColumn_jsId" headerText="City" width="200">
                            <h:outputText value="#{user.city}"/>
                        </p:column>

                        <p:column headerText="ZIP Code" width="200">
                            <h:outputText value="#{user.zipCode}"/>
                        </p:column>

                        <p:column headerText="Phone" width="200">
                            <h:outputText value="#{user.phone}"/>
                        </p:column>

                        <p:column headerText="Mobile" width="200">
                            <h:outputText value="#{user.mobile}"/>
                        </p:column>

                        <p:column headerText="Fax" width="200">
                            <h:outputText value="#{user.fax}"/>
                        </p:column>

                        <p:column headerText="SSN" width="200">
                            <h:outputText value="#{user.ssn}"/>
                        </p:column>

                        <p:column headerText="Hire Date" width="200">
                            <h:outputText value="#{user.hireDate}">
                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                            </h:outputText>
                        </p:column>

                        <p:column headerText="Enabled" width="200">
                            <h:outputText value="#{user.enabled}"/>
                        </p:column>

                    </p:dataTable>

                    <p:panel header="Description" >
                        <p>Datatable with sorting, filtering and pagination implemented on database with lazy data model</p>
                        <p>Filtering is done with a custom implementation instead of the Primefaces builtin implementation which
                           allows only Strings in filters. Filtering is done with a p:remoteCommand triggered from custom inputs
                           on the header (Text &amp; Date in the example). Custom text input allows for debouncing of keyup events to trigger
                           filter after x millis (via javascript external lib)</p>
                    </p:panel>

                </h:panelGrid>


            </h:form>

        </ui:define>

    </ui:composition>

</html>